<template>
  <el-row class="guangaho">
    <el-col :span="20" :offset="2">
      <el-row class="wap">
        <div @mouseenter="gofirend">
          <router-link to="/index/guangao" class="fir" active-class="sjxx">合作伙伴</router-link>
        </div>

        <div style="margin-left:20px" @mouseenter="gofirend2">
          <router-link to="/index/friend" class="fir" active-class="sjxx">友情链接</router-link>
        </div>
      </el-row>
      <el-row>
        <router-view />
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import guanpo from "../tool/gaocom";
export default {
  components: {
    guanpo
  },
  methods: {
    gofirend() {
      console.log(1);
      this.$router.push({ path: "/index/guangao" });
    },
    gofirend2() {
      this.$router.push({ path: "/index/friend" });
    }
  }
};
</script>

<style scoped>
.guangaho {
  height: 140px;
  background-color: #ffffff;
  padding-top: 8px;
}
.guangaho .wap {
  height: 40px;
  border-bottom: 1px solid #dfdfdf;
  padding: 10px 10px;
  display: flex;
  align-items: flex-end;
}
.fir {
  width: 80px;
  height: 25px;
}
.sjxx {
  position: relative;
  color: blue;
}
a {
  color: #000;
}
.sjxx::after {
  display: block;
  content: "";
  position: absolute;
  bottom: -12px;
  left: 30%;
  width: 0;
  height: 0;
  border: 11px solid;
  transform: translateX(-50%);
  z-index: 1111;
  border-color: transparent transparent #ffffff;
}
.sjxx::before {
  display: block;
  content: "";
  position: absolute;
  bottom: -12px;
  left: 30%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border: 11px solid;
  border-color: transparent transparent #000;
  z-index: 111;
}
</style>